<template>
  <div class="defenseUnit-comp-ct c_page">
    <van-nav-bar :title="componentName" left-arrow @click-left="goback">
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <div class="c_container">
      <van-pull-refresh v-model="loading" @refresh="loadData">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="addData">
          <div v-for="item in list" :key="item.ID" :title="item" class="card">
            <div class="cart_title">
              <span>{{item.DYMC}}</span>
            </div>
            <van-row>
              <van-col :span="24">
                <van-cell title="战时用途" :value="item.ZSYT"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col :span="12">
                <van-cell title="面积" :value="item.MJ"></van-cell>
              </van-col>
              <van-col :span="12">
                <van-cell title="防化等级" :value="item.FHDJ"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col :span="12">
                <van-cell title="抗力等级(核)" :value="item.KLDJ"></van-cell>
              </van-col>
              <van-col :span="12">
                <van-cell title="抗力等级(常)" :value="item.KLDJC"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col :span="24">
                <van-cell title="有效掩蔽面积" :value="item.YXPBMJ"></van-cell>
              </van-col>
            </van-row>
            <van-row>
              <van-col :span="12">
                <van-cell title="出入口数量" :value="item.CRKSL"></van-cell>
              </van-col>
              <van-col :span="12">
                <van-cell title="掩蔽情况" :value="item.YPQK"></van-cell>
              </van-col>
            </van-row>
            <div class="sub_btn">
              <van-button
                class="btn_more"
                type="info"
                size="small"
                round
                plain
                hairline
                right
                @click="showSB(item.ID)"
              >查看设备</van-button>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast, Icon, NavBar } from "vant";
Vue.use(Toast)
  .use(Icon)
  .use(NavBar);
export default {
  name: "defenseUnit",
  data() {
    return {
      componentName: "防护单元",
      projectID: -1,
      loading: false,
      finished: false,
      list: [],
      itemtemplate: {
        ID: "id",
        PROJECT_ID: "id",
        DYMC: "第一防护单元",
        ZSYT: "战时用途",
        MJ: "面积",
        FHDJ: "防化等级",
        KLDJ: "抗力等级(核)",
        KLDJC: "抗力等级(常)",
        YXPBMJ: "有效遮掩面积",
        CRKSL: "出入口数量",
        YPQK: "遮掩情况"
      }
    };
  },
  methods: {
    goback() {
      this.$router.back(-1);
    },
    loadData() {
      for (let i = 0; i < 5; i++) {
        let item = eval("(" + JSON.stringify(this.itemtemplate) + ")");
        item.ID = i;
        this.list.push(item);
      }
      this.loading = false;
      this.finished = true;
    },
    addData(cont) {
      //无限滚动，触发加载事件后追加列表数据
      this.loading = false;
    },
    showSB(id) {
      this.$router.push({
        name: "devList",
        params: {
          unitId: id
        }
      });
    }
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.projectID = this.$route.params.pid;
  }
};
</script>
<style lang="scss" scoped>
.defenseUnit-comp-ct {
  .cfs {
    font-weight: bold;
  }
  .card {
    margin: 10px 3px;
    .cart_title {
      text-align: left;
      background: linear-gradient(#8bd8f7, #0b93c9);
      color: #fff;
      line-height: 30px;
      span {
        margin-left: 10px;
      }
    }
    .van-cell {
      padding: 5px 3px;
      line-height: 1.1rem;
      .van-cell__title {
        text-align: left;
      }
      .van-cell__value {
        text-align: left;
      }
    }
    .sub_btn {
      min-height: 30px;
      .btn_more {
        width: 150px;
        margin: 5px;
      }
    }
  }
}
</style>
